<template>
  <div class="course-management">
    <!-- 顶部操作区域 -->
    <div class="header-section">
      <div class="header-content">
        <h1>课程管理</h1>
        <p>管理您的在线课程内容和设置</p>
      </div>
      <div class="action-buttons">
        <button @click="showAddModal" class="btn-primary">
          <span class="icon">+</span> 添加新课程
        </button>
        <div class="view-toggle">
          <button 
            :class="['view-btn', viewMode === 'table' ? 'active' : '']" 
            @click="viewMode = 'table'"
            title="表格视图"
          >
            ≡
          </button>
          <button 
            :class="['view-btn', viewMode === 'grid' ? 'active' : '']" 
            @click="viewMode = 'grid'"
            title="卡片视图"
          >
            ◻◻
          </button>
        </div>
      </div>
    </div>

    <!-- 筛选和搜索区域 -->
    <div class="filter-section">
      <div class="search-box">
        <span class="search-icon">🔍</span>
        <input 
          v-model="searchQuery" 
          type="text" 
          placeholder="搜索课程名称、内容..." 
          class="search-input"
        >
      </div>
      <div class="filter-options">
        <select v-model="statusFilter" class="filter-select">
          <option value="">所有状态</option>
          <option value="active">已发布</option>
          <option value="inactive">未发布</option>
          <option value="draft">草稿</option>
        </select>
        <select v-model="sortOption" class="filter-select">
          <option value="newest">最新优先</option>
          <option value="oldest">最旧优先</option>
          <option value="name">按名称排序</option>
        </select>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <div class="spinner"></div>
      <p>正在加载课程数据...</p>
    </div>
    
    <!-- 错误状态 -->
    <div v-else-if="error" class="error-state">
      <div class="error-icon">⚠️</div>
      <h3>加载失败</h3>
      <p>{{ error }}</p>
      <button @click="fetchCourses" class="btn-retry">重试</button>
    </div>
    
    <!-- 表格视图 -->
    <div v-else-if="filteredCourses.length > 0 && viewMode === 'table'" class="table-view">
      <div class="table-container">
        <table class="course-table">
          <thead>
            <tr>
              <th class="column-checkbox">
                <input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
              </th>
              <th class="column-course">课程信息</th>
              <th class="column-content">内容简介</th>
              <th class="column-status">状态</th>
              <th class="column-instructor">讲师</th>
              <th class="column-actions">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="course in filteredCourses" :key="course.id" :class="{ selected: selectedCourses.includes(course.id) }">
              <td class="column-checkbox">
                <input type="checkbox" v-model="selectedCourses" :value="course.id">
              </td>
              <td class="column-course">
                <div class="course-info">
                  <div class="course-image">
                    <img 
                      v-if="course.picture && !imageErrors[course.id]" 
                      :src="getImageUrl(course.picture)" 
                      :alt="course.name"
                      @error="handleImageError($event, course.id)"
                      class="course-thumbnail"
                    >
                    <div v-else class="image-fallback">
                      <span class="fallback-icon">📚</span>
                    </div>
                  </div>
                  <div class="course-details">
                    <h3 class="course-title">{{ course.name || '未命名课程' }}</h3>
                    <div class="course-meta">
                      <span v-if="course.video" class="meta-item" @click="previewVideo(course)" title="预览视频">
                        <span class="meta-icon">🎬</span> 有视频
                      </span>
                      <span class="meta-item">
                        <span class="meta-icon">🆔</span> #{{ course.id }}
                      </span>
                    </div>
                  </div>
                </div>
              </td>
              <td class="column-content">
                <div class="content-preview">
                  {{ truncateText(course.content, 60) || '暂无内容介绍' }}
                </div>
                <div v-if="course.extral_1 || course.extral_2 || course.extral_3" class="course-tags">
                  <span v-if="course.extral_1" class="tag">{{ course.extral_1 }}</span>
                  <span v-if="course.extral_2" class="tag">{{ course.extral_2 }}</span>
                  <span v-if="course.extral_3" class="tag">{{ course.extral_3 }}</span>
                </div>
              </td>
              <td class="column-status">
                <span :class="['status-badge', course.status]">
                  {{ getStatusText(course.status) }}
                </span>
              </td>
              <td class="column-instructor">
                <div class="instructor-info">
                  <div class="avatar">{{ getInitials(course.user_id__name) }}</div>
                  <span class="instructor-name">{{ course.user_id__name || '未知讲师' }}</span>
                </div>
              </td>
              <td class="column-actions">
                <div class="action-buttons">
                  <button @click="previewCourse(course)" class="btn-action" title="预览">
                    👁️
                  </button>
                  <button @click="editCourse(course)" class="btn-action" title="编辑">
                    ✏️
                  </button>
                  <button @click="deleteCourse(course.id)" class="btn-action btn-delete" title="删除">
                    🗑️
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div class="table-footer">
        <div class="selected-count" v-if="selectedCourses.length > 0">
          已选择 {{ selectedCourses.length }} 个课程
          <button @click="batchDelete" class="btn-text">批量删除</button>
        </div>
        <div class="total-count">
          共 {{ filteredCourses.length }} 门课程
        </div>
      </div>
    </div>
    
    <!-- 卡片视图 -->
    <div v-else-if="filteredCourses.length > 0 && viewMode === 'grid'" class="grid-view">
      <div class="course-grid">
        <div v-for="course in filteredCourses" :key="course.id" class="course-card">
          <div class="card-header">
            <div class="course-image">
              <img 
                v-if="course.picture && !imageErrors[course.id]" 
                :src="getImageUrl(course.picture)" 
                :alt="course.name"
                @error="handleImageError($event, course.id)"
                class="card-thumbnail"
              >
              <div v-else class="image-fallback">
                <span class="fallback-icon">📚</span>
              </div>
              <span :class="['status-badge', course.status]">
                {{ getStatusText(course.status) }}
              </span>
            </div>
          </div>
          <div class="card-content">
            <h3 class="course-title">{{ course.name || '未命名课程' }}</h3>
            <p class="course-description">
              {{ truncateText(course.content, 90) || '暂无内容介绍' }}
            </p>
            <div v-if="course.extral_1 || course.extral_2 || course.extral_3" class="course-tags">
              <span v-if="course.extral_1" class="tag">{{ course.extral_1 }}</span>
              <span v-if="course.extral_2" class="tag">{{ course.extral_2 }}</span>
              <span v-if="course.extral_3" class="tag">{{ course.extral_3 }}</span>
            </div>
          </div>
          <div class="card-footer">
            <div class="instructor-info">
              <div class="avatar">{{ getInitials(course.user_id__name) }}</div>
              <span class="instructor-name">{{ course.user_id__name || '未知讲师' }}</span>
            </div>
            <div class="card-actions">
              <button v-if="course.video" @click="previewVideo(course)" class="btn-icon" title="预览视频">
                🎬
              </button>
              <button @click="editCourse(course)" class="btn-icon" title="编辑">
                ✏️
              </button>
              <button @click="deleteCourse(course.id)" class="btn-icon" title="删除">
                🗑️
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="grid-footer">
        <div class="total-count">
          共 {{ filteredCourses.length }} 门课程
        </div>
      </div>
    </div>
    
    <!-- 空状态 -->
    <div v-else class="empty-state">
      <div class="empty-icon">📚</div>
      <h3>暂无课程</h3>
      <p v-if="searchQuery || statusFilter">没有找到匹配的课程，请尝试调整搜索条件</p>
      <p v-else>您还没有创建任何课程，点击下方按钮开始创建</p>
      <button @click="showAddModal" class="btn-primary">创建新课程</button>
    </div>
    
    <!-- 视频播放模态框 -->
    <VideoModal
      v-if="showVideoModal"
      :video-url="currentVideoUrl"
      :video-title="currentVideoTitle"
      @close="closeVideoModal"
    />
    
    <!-- 课程模态框组件 -->
    <CourseModal
      v-model:visible="showModal"
      :course-data="selectedCourse"
      :is-edit="isEditMode"
      @submit="handleSubmit"
    />
  </div>
  <VideoModal
  :visible="showVideoModal"
  :video-url="currentVideoUrl"
  :title="currentVideoTitle"
  @update:visible="showVideoModal = $event"
  @close="handleVideoClose"
/>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
import request from '@/util/request';
import CourseModal from './CourseModal.vue';
import VideoModal from './VideoModal.vue'; // 假设有一个独立的视频模态框组件

const courseList = ref([]);
const loading = ref(true);
const error = ref(null);
const showModal = ref(false);
const isEditMode = ref(false);
const selectedCourse = ref(null);
const showVideoModal = ref(false);
const currentVideoUrl = ref('');
const currentVideoTitle = ref('');
const imageErrors = reactive({});
const viewMode = ref('table'); // 'table' 或 'grid'
const searchQuery = ref('');
const statusFilter = ref('');
const sortOption = ref('newest');
const selectedCourses = ref([]);
const selectAll = ref(false);

// 计算属性：过滤和排序课程
const filteredCourses = computed(() => {
  let filtered = courseList.value;
  
  // 根据搜索词过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    filtered = filtered.filter(course => 
      (course.name && course.name.toLowerCase().includes(query)) ||
      (course.content && course.content.toLowerCase().includes(query))
    );
  }
  
  // 根据状态过滤
  if (statusFilter.value) {
    filtered = filtered.filter(course => course.status === statusFilter.value);
  }
  
  // 排序
  if (sortOption.value === 'newest') {
    filtered = [...filtered].sort((a, b) => b.id - a.id);
  } else if (sortOption.value === 'oldest') {
    filtered = [...filtered].sort((a, b) => a.id - b.id);
  } else if (sortOption.value === 'name') {
    filtered = [...filtered].sort((a, b) => (a.name || '').localeCompare(b.name || ''));
  }
  
  return filtered;
});

// 获取图片URL
const getImageUrl = (filename) => {
  return `http://localhost:8000/uploads/${filename}`;
};

// 图片加载失败处理
const handleImageError = (event, courseId) => {
  imageErrors[courseId] = true;
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'active': '已发布',
    'inactive': '未发布',
    'draft': '草稿'
  };
  return statusMap[status] || status || '未知';
};

// 获取用户名称首字母
const getInitials = (name) => {
  if (!name) return '?';
  return name.charAt(0).toUpperCase();
};

// 全选/取消全选
const toggleSelectAll = () => {
  if (selectAll.value) {
    selectedCourses.value = filteredCourses.value.map(course => course.id);
  } else {
    selectedCourses.value = [];
  }
};

// 批量删除
const batchDelete = () => {
  if (selectedCourses.value.length === 0) return;
  
  if (confirm(`确定要删除选中的 ${selectedCourses.value.length} 门课程吗？`)) {
    // 这里实现批量删除逻辑
    selectedCourses.value.forEach(id => {
      deleteCourse(id, false); // 假设deleteCourse支持静默删除
    });
    selectedCourses.value = [];
    selectAll.value = false;
  }
};

// 获取课程列表
const fetchCourses = async () => {
  try {
    loading.value = true;
    error.value = null;
    
    const response = await request.get('/api/courseList');
    console.log('API 响应:', response);
    
    const { code, data } = response.data;
    
    if (code === 200) {
      courseList.value = data;
      console.log('课程数据:', courseList.value);
      
      // 初始化图片错误状态
      data.forEach(course => {
        if (course.picture) {
          imageErrors[course.id] = false;
        }
      });
    } else {
      error.value = 'API 返回错误代码: ' + code;
    }
  } catch (err) {
    console.error('获取课程失败:', err);
    error.value = err.message || '获取课程失败';
  } finally {
    loading.value = false;
  }
};

// 截断长文本
const truncateText = (text, length = 20) => {
  if (!text) return '';
  return text.length > length ? text.substring(0, length) + '...' : text;
};

// 预览视频
const previewVideo = (course) => {
  if (!course.video) return;
  
  currentVideoUrl.value = course.video;
  currentVideoTitle.value = course.name || '视频播放';
  showVideoModal.value = true;
};

// 关闭视频模态框
const closeVideoModal = () => {
  showVideoModal.value = false;
  currentVideoUrl.value = '';
  currentVideoTitle.value = '';
};

// 预览课程
const previewCourse = (course) => {
  // 实现课程预览逻辑
  console.log('预览课程:', course);
};

// 显示添加模态框
const showAddModal = () => {
  isEditMode.value = false;
  selectedCourse.value = null;
  showModal.value = true;
};

// 编辑课程
const editCourse = (course) => {
  isEditMode.value = true;
  selectedCourse.value = { ...course };
  showModal.value = true;
};

// 处理表单提交
const handleSubmit = async (formDataToSend, isEdit) => {
  try {
    console.log('=== 父组件接收到的 FormData ===');
    
    // 检查 FormData 内容
    let hasContent = false;
    for (let [key, value] of formDataToSend.entries()) {
      console.log(key, value);
      hasContent = true;
    }
    
    if (!hasContent) {
      console.error('FormData 是空的！');
      alert('表单数据为空，请重新填写');
      return;
    }
    
    let response;
    let url;
    
    if (isEdit) {
      // 编辑课程
      url = `/api/courses/${selectedCourse.value.id}`;
      console.log('编辑请求:', url);
      response = await request.put(url, formDataToSend, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
    } else {
      // 添加新课程
      url = '/api/addCourse';
      console.log('添加请求:', url);
      response = await request.post(url, formDataToSend, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
    }
    
    if (response.data.code === 200) {
      // 成功，刷新列表
      fetchCourses();
      showModal.value = false;
    } else {
      alert('操作失败: ' + response.data.message);
    }
  } catch (err) {
    console.error('操作失败:', err);
    alert('操作失败: ' + (err.response?.data?.message || err.message));
  }
};

// 删除课程
const deleteCourse = async (id, confirm = true) => {
  if (confirm && !window.confirm('确定要删除此课程吗？')) {
    return;
  }
  
  try {
    const response = await request.delete(`/api/courses/${id}`);
    if (response.data.code === 200) {
      // 成功，刷新列表
      fetchCourses();
    } else {
      alert('删除失败: ' + response.data.message);
    }
  } catch (err) {
    console.error('删除失败:', err);
    alert('删除失败: ' + (err.response?.data?.message || err.message));
  }
};

// 组件挂载时调用
onMounted(() => {
  fetchCourses();
});
</script>

<style scoped>
.course-management {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 头部样式 */
.header-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eaecef;
}

.header-content h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #1c1e21;
}

.header-content p {
  margin: 0;
  color: #65676b;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-primary {
  background-color: #1877f2;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #166fe5;
}

.view-toggle {
  display: flex;
  background: #f0f2f5;
  border-radius: 6px;
  padding: 4px;
}

.view-btn {
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.view-btn.active {
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 筛选区域样式 */
.filter-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 260px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #8a8d91;
}

.search-input {
  width: 700px;
  padding: 10px 12px 10px 40px;
  border: 1px solid #dddfe2;
  border-radius: 6px;
  font-size: 14px;
}

.search-input:focus {
  outline: none;
  border-color: #1877f2;
  box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2);
}

.filter-options {
  display: flex;
  gap: 12px;
}

.filter-select {
  padding: 10px 12px;
  border: 1px solid #dddfe2;
  border-radius: 6px;
  font-size: 14px;
  background: white;
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #65676b;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f0f2f5;
  border-top: 3px solid #1877f2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 错误状态 */
.error-state {
  text-align: center;
  padding: 60px 20px;
  color: #dc3545;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.error-state h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.error-state p {
  margin: 0 0 20px 0;
  color: #6c757d;
}

.btn-retry {
  background-color: #1877f2;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 表格视图 */
.table-view {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.table-container {
  overflow-x: auto;
}

.course-table {
  width: 100%;
  border-collapse: collapse;
}

.course-table th {
  background-color: #f7f8fa;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #4b4f56;
  font-size: 13px;
  border-bottom: 1px solid #e4e6eb;
}

.course-table td {
  padding: 16px;
  border-bottom: 1px solid #e4e6eb;
  vertical-align: top;
}

.course-table tbody tr:hover {
  background-color: #f7f8fa;
}

.course-table tbody tr.selected {
  background-color: #ebf5ff;
}

.column-checkbox {
  width: 40px;
  text-align: center;
}

/* 课程信息列 */
.course-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.course-image {
  flex-shrink: 0;
  position: relative;
}

.course-thumbnail {
  width: 60px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.image-fallback {
  width: 60px;
  height: 40px;
  border-radius: 4px;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a8d91;
}

.fallback-icon {
  font-size: 18px;
}

.course-details {
  flex: 1;
  min-width: 0;
}

.course-title {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: #1c1e21;
  line-height: 1.4;
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #65676b;
  cursor: pointer;
}

.meta-icon {
  font-size: 14px;
}

/* 内容列 */
.content-preview {
  font-size: 14px;
  color: #4b4f56;
  line-height: 1.5;
  margin-bottom: 8px;
}

.course-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag {
  background: #f0f2f5;
  color: #4b4f56;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* 状态列 */
.status-badge {
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background: #e7f3e8;
  color: #2e7d32;
}

.status-badge.inactive {
  background: #fef0e8;
  color: #ed6c02;
}

.status-badge.draft {
  background: #e8eaf6;
  color: #3949ab;
}

/* 讲师列 */
.instructor-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1877f2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
}

.instructor-name {
  font-size: 14px;
  color: #4b4f56;
}

/* 操作列 */
.action-buttons {
  display: flex;
  gap: 8px;
}

.btn-action {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.btn-action:hover {
  background: #f0f2f5;
}

.btn-delete:hover {
  background: #fef0e8;
  color: #d93829;
}

/* 表格底部 */
.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f7f8fa;
  border-top: 1px solid #e4e6eb;
}

.selected-count {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #4b4f56;
}

.btn-text {
  background: none;
  border: none;
  color: #1877f2;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}

.btn-text:hover {
  text-decoration: underline;
}

.total-count {
  font-size: 14px;
  color: #8a8d91;
}

/* 卡片视图 */
.grid-view {
  margin-top: 20px;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.course-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.course-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  position: relative;
}

.card-thumbnail {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.card-header .status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

.card-content {
  padding: 16px;
}

.course-description {
  font-size: 14px;
  color: #4b4f56;
  line-height: 1.5;
  margin: 8px 0;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid #f0f2f5;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.btn-icon {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.btn-icon:hover {
  background: #f0f2f5;
}

.grid-footer {
  margin-top: 20px;
  text-align: center;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #8a8d91;
}

.empty-icon {
  font-size: 60px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #4b4f56;
}

.empty-state p {
  margin: 0 0 20px 0;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .course-management {
    padding: 16px;
  }
  
  .header-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .filter-section {
    flex-direction: column;
  }
  
  .search-box {
    min-width: 100%;
  }
  
  .course-table {
    min-width: 800px;
  }
  
  .course-grid {
    grid-template-columns: 1fr;
  }
  
  .column-checkbox,
  .column-status,
  .column-instructor {
    display: none;
  }
}

@media (max-width: 480px) {
  .filter-options {
    flex-direction: column;
    width: 100%;
  }
  
  .filter-select {
    width: 100%;
  }
}
</style>